<template>
	<div class="page">
		<view-box ref="viewBox" id="view-box">
			<!--<x-header slot="header" :left-options="{backText: ''}" style="background-color:rgb(58,175,252);" :right-options="{showMore: true}" @on-click-more="showMenus = true">健康档案</x-header>-->
			<x-head></x-head>
			<div class="listbox first-list">
				<group>
					<cell title="基础信息" class="list-cell"></cell>
					<x-input title="姓　　名" v-model="baseData.real_name" placeholder="必填" text-align="right" :required="true"></x-input>
					<cell title="性　　别" :value="gender" v-model="baseData.gender" is-link @click.native='showGenderMenu'></cell>
					<x-input type="number" title="身　　高" v-model="baseData.height" placeholder="(cm)必填" text-align="right" :required="true"></x-input>
					<x-input type="number" title="体　　重" v-model="baseData.weight" placeholder="(kg)必填" text-align="right" :required="true"></x-input>
					<!--<x-input title="联系方式" placeholder="必填" text-align="right" :required="true"></x-input>-->
					<x-input title="联系方式" text-align="right" v-model="baseData.tel" placeholder="必填" mask="99999999999" :max="11" is-type="china-mobile"></x-input>
					<datetime title="出生日期" :value='birthday' placeholder="必填" @on-change="datetimeAction" :required="true" format="YYYY-MM-DD" start-date="1900-01-01"></datetime>
					<!--<cell title="身  份  证" :value="baseData.idCard"></cell>-->
					<x-input type="number" title="身  份  证" v-model="baseData.idCard" text-align="right" :required="true"></x-input>
				</group>
			</div>
			<div class="listbox last-list">
				<group>
					<cell title="健康状况" class="list-cell"></cell>
					<x-input type="number" v-model="personalInfo.dbp" title="舒张压(mmHg)" placeholder="mmhg" text-align="right"></x-input>
					<x-input type="number" v-model="personalInfo.sbp" title="收缩压(mmHg)" placeholder="mmhg" text-align="right"></x-input>
					<x-input type="number" v-model="personalInfo.t" title="体　　温(℃)" placeholder="℃" text-align="right"></x-input>
					<x-input type="number" v-model="personalInfo.pulse" title="脉搏(次/分)" placeholder="次/分" text-align="right"></x-input>
					<x-input type="number" v-model="personalInfo.r" title="呼吸(次/分)" placeholder="次/分" text-align="right"></x-input>
					<x-input type="number" v-model="personalInfo.glu" title="空腹血糖(mmol/L)" placeholder="mmol/L" text-align="right"></x-input>
					<!--<popup-radio ref="blood" title="血　　型" :options="options3" @on-hide='bloodAction'></popup-radio>-->
					<cell title="血　　型" :value="personalInfo.blood" is-link @click.native='showBloodMenu'></cell>
					<x-switch title="药物过敏史" @on-change="showMedicineAction" :value="showMedicine"></x-switch>
					<x-input title=" " v-model="personalInfo.drugHypersensitivity" placeholder="药物过敏史" text-align="right" v-show="showMedicine"></x-input>
					<x-switch title="食物过敏史" @on-change="showFoodAction" :value="showFood"></x-switch>
					<x-input title=" " v-model="personalInfo.foodAllergy" placeholder="食物名称" text-align="right" v-show="showFood"></x-input>
					<x-switch title="暴露史" @on-change="showHistoryAction" :value="showHistory"></x-switch>
					<x-input title=" " v-model="personalInfo.exposureHistory" placeholder="例如: 核污染、重金属等" text-align="right" v-show="showHistory"></x-input>
				</group>
			</div>
		<!-- 选择男女 菜单 -->
		<div v-transfer-dom>
			<actionsheet v-model="showGender" :menus="menusGender" @on-click-menu='clickGendermeunu'>
			</actionsheet>
		</div>
		<!-- 选择血型 菜单 -->
		<div v-transfer-dom>
			<actionsheet v-model="showBlood" :menus="menusBlood" @on-click-menu='clickBloodmeunu'>
			</actionsheet>
		</div>
		</view-box>
		<!--<tabbar id="btnbox">
			<tabbar-item @on-item-click="prvAction">
				<span slot="label" class="prv">上一步</span>
			</tabbar-item>
			<tabbar-item @on-item-click="nextAction" class="next">
				<span slot="label">下一步</span>
			</tabbar-item>
		</tabbar>-->
				<div class="footer" id="btnbox">
					<router-link class="index_1" to='/datamonitor' replace>上一步</router-link>
					<div class="index_2" @click="nextAction">下一步</div>
				</div>
		
		<!--  子页面 -->
		<transition>  <!-- enter-active-class='slideInRight animated' leave-active-class='slideOutRight animated'-->
			<router-view>
			</router-view>
		</transition>
	</div>

</template>

<script>
	import Api from '@/api/index.js'
	import xHead from '@/components/common/Head.vue'
	import {formatDate} from '@/assets/js/fetch.js'
	export default {
		components: {
			xHead
		},
		data() {
			return {
				customer_id: '',
				baseData: {
					birthday: '',
					customer_id: '',
					gender: '',
					height: '',
					idCard: '',
					real_name: '',
					tel: '',
					weight: ''
				},
				personalInfo: {
					dbp: '', //  舒张压
					sbp: '', //   收缩压
					t: '', //体温 
					pulse: '', //脉搏
					r: '', //呼吸
					glu: '', //空腹血糖
					blood: '', //血型
					drugHypersensitivity: '', //药物过敏史
					foodAllergy: '', //食物过敏史
					exposureHistory: '', //暴露史
					customer_id: ''
				},
				birthday: '',
				showMedicine: false,
				showFood: false,
				showHistory: false,
				showMenus: false,
				showGender: false,
				menusGender: {
					male: '男',
					female: '女'
				},
				gender: '',
				showBlood: false,
				menusBlood: {
					A: 'A型',
					B: 'B型',
					AB: 'AB型',
					O: 'O型',
				},
				options2: [{
					key: 'A',
					value: '男'
				}, {
					key: 'B',
					value: '女'
				}]
			}
		},
		filters: {
			formatDate(time) {
				let date = new Date(time);
				return formatDate(date, 'yyyy-MM-dd')
			}
		},
		created(){
			this.customer_id = localStorage.getItem('customer_id')
			//  初始化
			this.getBaseData();
			this.getListData();
		},
		mounted(){
			//  解决 手机键盘弹出bug
			var original = document.documentElement.clientHeight;
			window.addEventListener("resize", function() {
				var resizeHeight = document.documentElement.clientHeight;
				if(resizeHeight != original) {
					document.getElementById('btnbox').style.display = 'none'
				} else {
					document.getElementById('btnbox').style.display = 'block'
				}
			});
		},
		methods: {
			//  修改健康状况
			editInfoData(){
				if(this.personalInfo.glu == null){
					this.personalInfo.glu = ''
				}
				if(this.personalInfo.dbp == null){
					this.personalInfo.dbp = ''
				}
				if(this.personalInfo.sbp == null){
					this.personalInfo.sbp = ''
				}
				if(this.personalInfo.r == null){
					this.personalInfo.r = ''
				}
				if(this.personalInfo.t == null){
					this.personalInfo.t = ''
				}
				if(this.personalInfo.blood == null){
					this.personalInfo.blood = ''
				}
				if(this.personalInfo.pulse == null){
					this.personalInfo.pulse = ''
				}
				if(this.personalInfo.drugHypersensitivity == null){
					this.personalInfo.drugHypersensitivity = ''
				}
				if(this.personalInfo.foodAllergy == null){
					this.personalInfo.foodAllergy = ''
				}
				if(this.personalInfo.exposureHistory == null){
					this.personalInfo.exposureHistory = ''
				}
				// 健康状况
				let param1 = new URLSearchParams();
			
			//  大写转小写
				this.personalInfo.DBP = this.personalInfo.dbp
				this.personalInfo.SBP = this.personalInfo.sbp
				this.personalInfo.T = this.personalInfo.t
				this.personalInfo.R = this.personalInfo.r
				this.personalInfo.GLU = this.personalInfo.glu
				this.personalInfo.customer_id = localStorage.getItem('customer_id')
				param1.append('customer_id', Number(this.personalInfo.customer_id));
				param1.append('DBP', this.personalInfo.DBP);
				param1.append('SBP', this.personalInfo.SBP);
				param1.append('T', this.personalInfo.T);
				param1.append('pulse', this.personalInfo.pulse);
				param1.append('R', this.personalInfo.R);
				param1.append('GLU', this.personalInfo.GLU);
				param1.append('blood', this.personalInfo.blood);
				param1.append('drugHypersensitivity', this.personalInfo.drugHypersensitivity);
				param1.append('foodAllergy', this.personalInfo.foodAllergy);
				param1.append('exposureHistory', this.personalInfo.exposureHistory);
				this.$http({
						method: 'post',
						url: '/health_record/add_health_status.do',
						data: param1
					})
					.then((res) => {
						console.log(res)
					})
					.catch((err) => {
						console.log(err)
					})
			},
			// 修改基本资料
			editBaseData(){
				//  日期转时间戳
				var date = new Date(this.baseData.birthday);
				var timer = date.getTime();
				this.baseData.birthday = timer;
				this.baseData.customer_id = localStorage.getItem('customer_id');
				this.baseData.customer_id = Number(this.baseData.customer_id)
//				console.log(this.baseData)
				if(this.baseData.gender == '男'){
					this.baseData.gender = 1
				} else { 
					this.baseData.gender = 2
				}
//				console.log(this.baseData)
				
				let param = new URLSearchParams();
				// 基础信息
				param.append('customer_id', this.baseData.customer_id);
				param.append('real_name', this.baseData.real_name);
				param.append('gender', this.baseData.gender);
				param.append('height', this.baseData.height);
				param.append('weight', this.baseData.weight);
				param.append('tel', this.baseData.tel);
				param.append('birthday', this.baseData.birthday);
				param.append('idCard', this.baseData.idCard);
				if(this.baseData.real_name !== '' && this.baseData.gender !== '' &&
				   this.baseData.height !== '' && this.baseData.weight !== '' && 
				   this.baseData.tel !== '' && this.baseData.birthday !== '' && this.baseData.idCard !== ''){
				   	if(this.baseData.gender == 1){
				   		this.baseData.gender = '男'
				   	} else {
				   		this.baseData.gender = '女'
				   	}
				  
				   	this.$http({
							method: 'post',
							url: '/health_record/update_customer.do',
							data: param
						})
						.then(({data})=>{
							localStorage.setItem('realName',this.baseData.real_name);  // 更换姓名
							if(data.status == 45){
								this.$vux.toast.show({
									text: '该用户的身份证号已存在',
									type: 'cancel'
								})
							} else if(data.status == 46){
								this.$vux.toast.show({
									text: '该用户的手机号已存在',
									type: 'cancel'
								})
							} else {
								this.$router.replace({
									path: '/healthbase/next/id' + this.customer_id
								})
							}
							console.log(data)
						})
						.catch((err)=>{
							console.log(err)
						})
				} else {
					this.$vux.toast.show({
						text: '资料未填写完整',
						type: 'cancel'
					})
					if(this.baseData.gender == 1){
				   		this.baseData.gender = '男'
				   	} else {
				   		this.baseData.gender = '女'
				   	}
				}
			},
			//  得到基本信息
			getBaseData(){
				let customer_id = localStorage.getItem('customer_id');
				let param = new URLSearchParams();
				param.append('customer_id', customer_id);
				this.$http({
					method: 'post',
					url: Api.health_recordBaseApi,
					data: param
				})
				.then(({data})=>{
					this.baseData = data.data;
					if(this.baseData.gender == 1){
						this.baseData.gender = '男'
					} else if(this.baseData.gender == 2){
						this.baseData.gender = '女'
					}
					//  时间戳转日期
					var date = new Date(data.data.birthday);
					let Y = date.getFullYear() + '-';
					let M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
					let D = date.getDate();
					D = D < 10 ? '0' + date.getDate() : D;
					this.birthday = Y + M + D;
					
				})
				.catch((err)=>{
					console.log(err)
				})
			},
			// 得到健康状况
			getListData(){
				let customer_id = localStorage.getItem('customer_id');
				let param = new URLSearchParams();
				param.append('customer_id', customer_id);
				this.$http({
					method: 'post',
					url: Api.health_status_listApi,
					data: param
				})
				.then(({data})=>{
//					console.log(data)
					if(data.data.drugHypersensitivity !== ''){
						this.showMedicine = true
					}
					if(data.data.foodAllergy !== ''){
						this.showFood = true
					}
					if(data.data.exposureHistory !== ''){
						this.showHistory = true
					}
					this.personalInfo = data.data;
//					console.log(this.personalInfo)
				})
				.catch((err)=>{
					console.log(err)
				})
			},
			//  显示选择男女 菜单
			showGenderMenu() {
				this.showGender = true;
			},
			//  选择男女菜单 选择
			clickGendermeunu(menuKey, menuItem) {
				this.gender = menuItem;
				this.baseData.gender = menuItem;
			},
			//  显示 选择血型 菜单
			showBloodMenu(){
				this.showBlood = true;
			},
			//  选择  血型菜单 选择
			clickBloodmeunu(menuKey, menuItem) {
				console.log(menuItem)
				this.personalInfo.blood = menuItem;
			},
			// 选择时间
			datetimeAction(value) {
				var timestamp1 = Date.parse(new Date(value))
				this.baseData.birthday = timestamp1;
			},
			// 显示药物过敏史
			showMedicineAction(value){
				value == true ? this.showMedicine = true : this.showMedicine = false;
			},
			//  显示食物过敏史
			showFoodAction(value){
				value == true ? this.showFood = true : this.showFood = false;
			},
			//显示暴露史
			showHistoryAction(value){
				value == true ? this.showHistory = true : this.showHistory = false;
			},
			//  上一步
			prvAction() {
				this.$router.back()
			},
			//  下一步
			nextAction() {
				this.editBaseData()
				this.editInfoData()
				
			}
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style scoped>
	.footer {
		width: 100%;
		height: 50px;
		position: absolute;
		bottom: 0;
		left: 0;
	}
	
	.footer div,.footer .index_1 {
		width: 50%;
		float: left;
		text-align: center;
		line-height: 50px;
		color: #fff;
		font-size: 14px;
	}
	
	.footer .index_1 {
		background: #F7F7FA;
		display: block;
		color: #999;
	}
	
	.footer .index_2 {
		background: rgb(58, 175, 252);
	}
	.vux-x-icon {
		fill: #F70968;
	}
	.first-list {
		margin: 10px 0;
	}
</style>